<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item label="病人姓名">
                        <el-input v-model="checkParam.patientName" placeholder="病人姓名"></el-input>
                    </el-form-item>
             


                    <el-form-item label="身份证号">
                       
                            <el-input  v-model="checkParam.idNum" placeholder="身份证号"></el-input>
                        
                    </el-form-item>
             
                    <el-form-item label="性别">
                        <input type="radio" value="男" v-model="checkParam.gender">男
                <input type="radio" value="女" v-model="checkParam.gender">女
                        
                    </el-form-item>
                 
                    <el-form-item label="请选择科室">
                        <el-select v-model="checkParam.depId" placeholder="请选择科室">
                            <el-option v-for="type in HdepartType" :key="type.id" :label="type.deName"
                                :value="type.id"></el-option>

                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="queryCondition">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        
            <el-dialog title="请选择缴费方式" :visible.sync="dialogFormVisible">
            <el-table :data="tableDataDrug" style="width: 100%">

                <el-table-column prop="dwCaseId" v-model="dwCaseId" label="ID" width="180">

                </el-table-column>
                <el-table-column prop="patientName" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="idNum" label="身份证" width="180">
                </el-table-column>
                <el-table-column prop="gender" label="性别"> </el-table-column>
                <el-table-column prop="age" label="年龄"> </el-table-column>
                <el-table-column prop="depName" label="所在科室"> </el-table-column>
                <el-table-column prop="finMoney" label="充值金额">  
                        <template slot-scope="scope">  
                            {{ Math.abs(scope.row.finMoney) }}  
                        </template>  
                        </el-table-column>  
                <el-table-column label="操作">
                        <template slot-scope="scope">
                            
                            
                            <el-button @click="pay(scope.row)">支付宝支付</el-button>
            <el-button @click="dialogFormVisible= false">取消</el-button>

                        </template>

                    </el-table-column>
                

            </el-table>
          
                   
                
        <div style="margin-top: 20px" align="center">
           
                            
                           
                            
                        
            
           
        </div>
        </el-dialog>
       
        <el-dialog title="退款结算" :visible.sync="dialogFormVisible1">
            <el-table :data="tableDataDrug1" style="width: 100%">

                <el-table-column prop="dwCaseId" v-model="dwCaseId" label="ID" width="180">

                </el-table-column>
                <el-table-column prop="patientName" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="idNum" label="身份证" width="180">
                </el-table-column>
                <el-table-column prop="gender" label="性别"> </el-table-column>
                <el-table-column prop="age" label="年龄"> </el-table-column>
                
                <el-table-column prop="depName" label="住院科室" align="center" width="180">
                    </el-table-column>
                    <el-table-column prop="day" label="住院天数" align="center" width="180">
                    </el-table-column>
                    <el-table-column prop="money" label="住院费用" align="center" width="180">
                    </el-table-column>
                <el-table-column prop="finMoney" label="充值金额">  
                        <template slot-scope="scope">  
                            {{ Math.abs(scope.row.finMoney) }}  
                        </template>  
                        </el-table-column>  
                <el-table-column label="操作">
                        <template slot-scope="scope">
                            
                            
                            <el-button @click=" refund1(scope.row)">退还</el-button>
            <el-button @click="dialogFormVisible1= false">取消</el-button>

                        </template>

                    </el-table-column>
                

            </el-table>
          
                   
                
        <div style="margin-top: 20px" align="center">
           
                            
                           
                            
                        
            
           
        </div>
        </el-dialog>

   
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="patientName" label="病人姓名" align="center" width="180">
                    </el-table-column>
         
              
                    <el-table-column prop="gender" label="性别" align="center" width="180">
                    </el-table-column>

                    
                    <el-table-column prop="age" label="年龄" align="center" width="180">
                    </el-table-column>
                    <el-table-column prop="idNum" label="身份证" align="center" width="180">
                    </el-table-column>
                    

                    <el-table-column prop="depName" label="住院科室" align="center" width="180">
                    </el-table-column>
                    <el-table-column prop="day" label="住院天数" align="center" width="180">
                    </el-table-column>
                    <el-table-column prop="money" label="住院费用" align="center" width="180">
                    </el-table-column>
                    <el-table-column prop="finMoney" label="费用情况" align="center" width="180">  
                    <template slot-scope="scope">  
                        <span :style="{ color: scope.row.finMoney < 0 ? 'red' : 'green' }">  

                        {{ scope.row.finMoney < 0 ? '需缴费 ' + (scope.row.finMoney * -1) : '应退款 ' + scope.row.finMoney }}  
                        </span>  
                    </template>  
                    </el-table-column>
                  
                    <el-table-column prop="purse" label="账户余额" align="center" width="180">
                  
                        <template slot-scope="scope">  
                            <span v-if="scope.row.purse < 0">0</span>  
                            <span v-else>{{ scope.row.purse }}</span>  
                        </template>  
                        </el-table-column>



                        <el-table-column label="操作">  
                                <template slot-scope="scope">  
                                    <el-button  
                                    v-if="scope.row.finMoney > 0"  
                                    type="primary"  
                                    :class="['refund-button', { 'green-button': true }]"  
                                    @click="refund(scope.row)">  
                                    退款结算  
                                    </el-button>  
                                    <el-button  
                                    v-else  
                                    type="primary"  
                                    :class="['payment-button', { 'red-button': true }]"  
                                    @click="payMent(scope.row)">  
                                    缴费  
                                    </el-button>  
                                </template>  
                                </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放分页 -->
                <el-pagination background :page-sizes="[4, 10, 20, 50]" :page-size="pageSize" :current-page="pageNum"
                    @next-click="nextPage" @prev-click="prevPage" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" layout=" total,sizes,prev, pager, next" :total="total">
                </el-pagination>
            </el-col>

        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dwCaseId:"",
            pageNum: "1",
            pageSize: "4",
            total: 0,
            tableData: [],
            tableDataDrug:[],
            tableDataDrug1:[],

            selectionData: [],
            dialogFormVisible : false,
            dialogFormVisible1 : false,
        
            checkParam: {
                patientName: "",
                idNum: "",
                gender: "",
                depId: ""

            },
            money:"",
            patientName: "",
                idNum: "",
                gender: "",
                depId: ""

                

        }
    },
    methods: {
        prevPage(val) {
            this.pageNum = val;
            this.queryAd();
        },
        nextPage(val) {
            //点击下一页触发

            this.pageNum = val;
            this.queryAd();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryAd();
        },
        handleSizeChange(val) {
            //改变每页条数触发
            this.pageNum = 1;
            this.pageSize = val;
            this.queryAd();
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.queryAd();


        },
        payAdd(dwCaseId){
            let param={}
            param.money=this.money
            param.dwCaseId=dwCaseId
            console.log(this.dwCaseId+"-------------zdfzdzdfzdfzf")
            this.$axios.post('api/hos/payAdd',param)
            .then(res=>{
                if(res.data.code==200){
                    this.$message.success("充值成功")
                    this.dialogFormVisible=false
                    this.queryCondition()
                    
                }
               
               

            })

        },
        PayMentAll(row){
           
            this.tableDataDrug=[];
           
            
            this.dialogFormVisible = true;
            this.tableDataDrug.push(row);  
            

        
        },
        refund1(row){
            let param={}
            param.dwCaseId=row.dwCaseId
            this.$axios.post('api/hos/queryPatient',param)
            .then(res=>{
                if(res.data.code==200){
                    this.$message.success("退款成功")
                    this.queryCondition()
                    
            }
        })

        },
        refund(row){
            this.dialogFormVisible1 = true;
            
            this.tableDataDrug1=[];
           
            
          
           this.tableDataDrug1.push(row);  

        },
        payMent(row){
            this.dialogFormVisible = true;
            
            this.tableDataDrug=[];
           
            
          
           this.tableDataDrug.push(row);  

        },
        pay(row){
            this.dialogFormVisible = false
            let ppNo=row.dwCaseId
            let money=row.finMoney
            window.open("http://localhost:8092/alipay/out?ppNo="+ppNo+ "&money=" + money);
            this.queryCondition()
            
            let param={}
            param.ckNo=ckNo
            this.$axios.post('api/alipay/pay',param)
            .then(res=>{
                this.dialogFormVisible = true;
                
               

            })
        },
     
        handleSelectionChange(val) {
            console.log(val)
            //选中的对象数组
            this.selectionData = val;

        },


       
        queryAd() {
            let pageParam = {}
            pageParam.pageNum = this.pageNum
            pageParam.pageSize = this.pageSize
            pageParam.param = this.checkParam
            this.$axios.post('api/hos/queryHosAll', pageParam)
                .then(res => {
                    console.log(res.data)
                    if (res.data.code == 200) {
                        this.tableData = res.data.data.list;
                        this.pageNum = res.data.data.pageNum
                        this.pageSize = res.data.data.pageSize
                        this.total = res.data.data.total
                        // console.log(this.tableData)
                    }
                })
        },
        handleDepartmentChange() {
           
          
           this.$axios.get('api/hos/queryTdeAll')
               .then(res => {
                   
                   if (res.data.code == 200) {
                       this.HdepartType = res.data.data
                   }
               })
       },
   


    },
    created() {
        this.queryAd();
        this.handleDepartmentChange();
       
    }
}
</script>

<style scoped>  
.green-button {  
  background-color: green !important; /* 使用 !important 来确保优先级 */  
  border-color: green !important;  
}  
  
.red-button {  
  background-color: red !important;  
  border-color: red !important;  
}  
</style>